import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const RatingScreen = () => {
  const [rating, setRating] = useState(0);
  const maxRating = 5;

  const handleStarPress = (starIndex) => {
    setRating(starIndex + 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>请您给我们的应用评分</Text>
      <View style={styles.ratingContainer}>
        {[...Array(maxRating)].map((_, index) => (
          <TouchableOpacity
            key={index}
            style={styles.starButton}
            onPress={() => handleStarPress(index)}
          >
            <Text style={index < rating ? styles.starActive : styles.starInactive}>
              ★
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <Text style={styles.ratingText}>
        您的评分: {rating} / {maxRating}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'black',
    marginBottom: 20,
  },
  ratingContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  starButton: {
    padding: 10,
  },
  starActive: {
    color: 'yellow',
    fontSize: 36,
  },
  starInactive: {
    color: '#DCDCDC',
    fontSize: 36,
  },
  ratingText: {
    fontSize: 20,
    color: 'black',
  },
});

export default RatingScreen;
